<template>
    <van-popup v-model:show="store.state.songDetailShow" position="bottom" :style="{ height: '100%', width: '100%' }">
        <img :src="store.getters.playingDetail.al.picUrl" alt="" class="bgimg">
        <div class="top">
            <div class="topLeft">
                <van-icon name="arrow-down" size="0.5rem" @click="closeDetailPopup()" />
            </div>
            <div class="topCenter">
                <Vue3Marquee>{{ store.getters.playingDetail.name }}</Vue3Marquee>
                <div class="centerAu">
                    <span v-for="au in store.getters.playingDetail.ar" :key="au.id">
                        {{ au.name + ' ' }}
                    </span>
                </div>
            </div>
            <div class="topRight">
                <van-icon name="share-o" size="0.5rem" @click="showShareSheet" />
            </div>
        </div>
        <div class="content" v-show="!store.state.musicLyricShow" @click="changeLyricShow">
            <img src="@/assets/needle-ab.png" alt=""
                :class="[store.state.isPlaying ? 'img_needle_active' : 'img_needle']">
            <img src="@/assets/cd.png" alt="" class="img_cd">
            <img :src="store.getters.playingDetail.al.picUrl" alt="" class="img_al"
                :class="[store.state.isPlaying ? 'img_al_active' : 'img_al_paused']">
        </div>
        <div class="lyric" ref="musicLyric" v-show="store.state.musicLyricShow" @click="changeLyricShow">
            <p v-for="item in store.getters.lyricDetail" :key="item"
                :class="[(store.state.currentTime * 1000 >= item.time && store.state.currentTime * 1000 < item.pre) ? 'active' : '']">
                {{ item.lrc }}
            </p>
        </div>
        <div class="footer">
            <div class="footerTop">
                <van-icon name="like-o" size="0.5rem" />
                <van-icon name="down" size="0.5rem" />
                <van-icon name="stop-circle-o" size="0.5rem" />
                <van-icon name="chat-o" size="0.5rem" />
                <van-icon name="replay" size="0.5rem" />
            </div>
            <div class="footerCenter">
                <input type="range" class="range" min="0" :max="store.state.duration" v-model="store.state.currentTime"
                    step="0.05">
            </div>
            <div class="footerEnd">
                <van-icon name="replay" size="0.5rem" />
                <van-icon name="arrow-left" size="0.5rem" @click="changePlayingMusic(-1)" />
                <van-icon v-if="!store.state.isPlaying" name="play-circle" size="1rem" @click="props.playMusic" />
                <van-icon v-else name="pause-circle" size="1rem" @click="props.playMusic" />
                <van-icon name="arrow" size="0.5rem" @click="changePlayingMusic(1)" />
                <van-icon name="bars" size="0.5rem" @click="showPlayList" />
            </div>
        </div>
    </van-popup>
    <van-notify id="van-notify" />
    <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" />
</template>

<script lang='ts' setup>
import { ref, watch } from 'vue'
import store from '@/store'
import { Vue3Marquee } from 'vue3-marquee'
import 'vue3-marquee/dist/style.css'
import { showNotify } from 'vant';
let musicLyric = ref()
const showShare = ref(false);
const props = defineProps(['playMusic'])
const options = [
    [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
    ],
    [
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        { name: '小程序码', icon: 'weapp-qrcode' },
    ],
];
const closeDetailPopup = () => {
    store.commit('updateSongDetailShow', false)
}
const changeLyricShow = () => {
    store.commit('updateMusicLyricShow')
}
// 切换歌曲
const changePlayingMusic = (ope: number) => {
    let index = store.state.playListIndex + ope
    if (store.state.playList.length === 1) {
        showNotify({ type: 'warning', message: '没有下一首了' });
        return;
    }
    if (index < 0) {
        index = store.state.playList.length - 1
    } else if (index === store.state.playList.length) {
        index = 0
    }
    store.commit('updatePlayListIndex', index)
}
const showPlayList = () => {
    store.commit('updatePlayListShow', true)
}
watch(() => store.state.currentTime, (newValue) => {
    let p: any = document.querySelector('p.active')
    if (p && p.offsetTop > 200) {
        musicLyric.value.scrollTop = p.offsetTop - 200
        console.log(newValue, store.state.duration)
    }
    if (newValue >= store.state.duration) {
        changePlayingMusic(1)
    }
})
const showShareSheet = () => {
    showShare.value = true
}
</script>
 
<style lang = "less" scoped>
.bgimg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    filter: blur(0.6rem);
}

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    margin: 0.2rem;

    .topCenter {
        width: 40%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .centerAu {

            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            font-size: 0.2rem;
            color: #999;
        }

    }
}

.content {
    width: 100%;
    height: 9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    .img_needle {
        height: 3rem;
        position: absolute;
        left: 46%;
        transform-origin: 0 0;
        transform: rotate(-16deg);
        transition: all 2s;
    }

    .img_needle_active {
        height: 3rem;
        position: absolute;
        left: 46%;
        transform-origin: 0 0;
        transform: rotate(0deg);
        transition: all 2s;
    }

    .img_cd {
        width: 5rem;
        height: 5rem;
        position: absolute;
        bottom: 2.3rem;
        z-index: -1;
    }

    .img_al {
        width: 3.2rem;
        height: 3.2rem;
        border-radius: 50%;
        position: absolute;
        bottom: 3.14rem;
        animation: rotate_al 10s linear infinite;
    }

    .img_al_active {
        animation-play-state: running;
    }

    .img_al_paused {
        animation-play-state: paused;
    }

    @keyframes rotate_al {
        0% {
            transform: rotateZ(0deg)
        }

        100% {
            transform: rotateZ(360deg)
        }
    }
}

.lyric {
    width: 100%;
    height: 9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-top: 0.2rem;
    overflow: scroll;
    scroll-behavior: smooth;

    p {
        color: #999;
        display: inline-block;
        text-align: center;
    }

    .active {
        width: 80%;
        color: #fff;
        font-size: 0.35rem;
        display: inline-block;
        text-align: center;
    }
}

.footer {
    width: 100%;
    height: 18%;
    color: #c0c0c0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 0.6rem;

    .footerTop {
        display: flex;
        justify-content: space-around;
    }

    .footerCenter {
        display: flex;
        justify-content: center;

        .range {
            width: 90%;
            height: 0.05rem;
        }
    }

    .footerEnd {

        display: flex;
        justify-content: space-around;
        align-items: center;
    }
}
</style>